| 
CHAPTER 


11 


CREATING SPLASH SCREENS 


Creating Image Maps 


In this chapter, you will: 
+ Design splash screens 
è Use guides 
è Create image maps with ImageReady 
è Create image maps manually 


plash screens are often used on the Web to introduce sites. Unlike magazines, 

Web sites have no front cover that quickly establishes the identity of the site. 
Most sites have a unique logo and color scheme, but many use the same layout 
and end up looking almost exactly alike. Designers of some sites choose to use 
a large graphic on the home page to introduce the site to visitors and to help 
distinguish the home page. These splash screens might be only a large static 
graphic, or also can link to other parts of the site. 


You can use any type of graphic for splash screens, but a common one is an 
image map, which is a single graphic that can link to multiple destinations. 
Image maps do have some limitations, so you might prefer to lay out your 
splash screen using tables in HTML and multiple small image files instead of 
one large image map. 


This chapter covers creating image maps and using graphics to lay out Web pages. 
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DESIGNING SPLASH SCREENS 


Not every site is appropriate for using splash screens. Web page design often involves a 
compromise between speed and graphics; most sites need to focus on being fast rather 
than being attractive, if they want to retain users who are reluctant to wait for pages to 
download. Design is, of course, more than just making things attractive. It also is about 
making the interface more useful by helping to identify content and by making naviga- 
tion clear. A well-designed splash screen, therefore, should be more than something 
pleasing to the eyes. It can establish the identity of the site as well as all of the content 
and features available on the site. It also can be functional, and provide clear navigation 
to the rest of the site. Many sites can benefit from using splash screens, as long as they 
do not take too long to download. 


If you decide to use a splash screen, it will probably be the largest image on the site, 
with a few hundred pixels on each side. Most Web graphics have tight constraints of 
dimensions, file size, and purpose, so creating images such as buttons, bullets, and ani- 
mations is more craft than art. Splash screens provide the biggest opportunity for artis- 
tic expression and require the most creative design skills of any type of Web graphic. 


You can create splash screens using image maps (described later), or using multiple pieces 
of a larger image positioned in the cells of HTML tables. You also can use Flash or other 
animation formats. 


Splash screens are normally used on the home page ofa site and are the users’ first intro- 
duction to the style of the rest of the site. The splash screen sets the mood for all the 
pages to follow. If the splash screen takes a few minutes to load completely, the user may 
suspect the rest of the site will also load slowly. If the navigation is unclear and requires 
hunting for the proper link, the user may suspect that the rest of the site also has an 
unintuitive architecture. If the splash screen is attractive and useful, however, the user 
probably will have high expectations for the other pages. 


The design of a splash screen has to be as creative and interesting as possible, without 
compromising the needs of quick downloading. 


Selecting a Format 


If you look around the Web, you will see that only certain types of sites use splash screens. 
Most commercial sites make money from displaying ads or by collecting commissions 
from online purchases. The producers of these sites normally want the content or services 
to be available to users as quickly as possible, and splash screens can represent barriers that 
users must cross before they can begin engaging with the site. The style of most com- 
mercial pages is to provide the user with as much content and as many links as possible 
at all times, encouraging them to click to additional pages. Commercial sites usually have 
no blank space and fill every inch with information, navigation buttons, or advertise- 
ments. Commercial sites rarely use any extraneous design or graphics. Their business relies 
on pages loading quickly, and they do not use elements that slow down the loading of a page. 
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A better candidate for splash screens is a promotional site. Promotional sites range from 
personal sites (that promote a person or hobby), to portfolio sites that promote an artist 
and his or her work, to corporate sites that promote a product or image. The purpose 
of these sites is to define the brand, image, and mood of a person or product and to pro- 
vide information or services. Splash screens are appropriate for these sites because the 
graphical display of information and navigation allows the designer to evoke a feeling, 
instead of merely listing text links. 


Another type of site that can benefit from splash screens is one that requires users to 
open an account before accessing the site. Such sites include online banking or stock 
trading sites. The producers of these sites usually want to provide information only to 
users who do have accounts on the site. The front page of these sites requires only an 
identity, a login box, a signup box, and information about the site. This often leaves 
plenty of room for a splash screen. Without one, the page would be nearly empty. So, in 
addition to helping brand the site, splash screens can help fill a page. 


If you choose to create a splash screen for a site, you have several choices for imple- 
mentation. You can create an image map, lay out several small images in a table, or use 
an advanced technology such as Flash, which is a vector animation format requiring a 
plug-in. 


Using an Image Map 


If you have tried positioning buttons in tables, you know it can be difficult to use any 
layout other than a simple row or column. Image maps, on the other hand, allow pixel- 
perfect control over the positioning of your graphics. Instead of multiple images where 
each one links to a different page, an image map is a single image that can have links to 
many pages. The locations and sizes of the linked regions are defined in HTML code. 
The links in image maps are called hot spots. Recall that any image can be used as a 
hyperlink. Because Web graphics are always rectangular, the clickable area is always rec- 
tangular as well, even when the image contains transparency. With image maps, the hot 
spots can be rectangular, circular, or polygonal—having many sides. These are shown in 
Figure 11-1. 


Rectangular image map areas 


Circular image map areas 


Polygonal image map area 


Figure 11-4 Different shapes of hot spots 


Another advantage to image maps is that you can use soft, feathered gradations of color 
over textured backgrounds in an image map, as shown in Figure 11-2. This cannot be 
done with normal buttons, which always have hard edges. 
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Button image placed over background image with hard edge 


Button incorporated into image map with soft edge 


Figure 11-2 Feathered edges over a background in an image map 


Because image maps tend to be larger than other types of Web graphics, and have larger 
file sizes, it is worth creating an image map only when you have a complex design that 
cannot be easily implemented with multiple small images. Usually, the image maps take 
longer to download than anything else on a site. This is especially problematic because 
splash screen pages are almost always the first page that users see. It is crucial to not dis- 
courage users when they get to that first page. Everyone who has used the Web has had 
the experience of trying to view a page, becoming frustrated by how slowly the page 
loads, then clicking the back button and trying a different site. If users must wait more 
than several seconds for a page to load before they see anything, they will try another 
site. As with every Web graphic, you have to find the right balance between an attrac- 
tive image and one that loads quickly. 


Few site designers use image maps. They prefer to use several images positioned near 
each other in a grid. This type of image is called a sliced image. Other alternatives to 
creating an image map are to use a Flash animation or a 3-D graphic as a splash screen. 
These alternatives are discussed in the following sections. One reason for using image 
maps as opposed to these other options is that image maps are single images, and all links 
are available at the same time. If you use several buttons, or use individual images posi- 
tioned close to each other in tables, users might have to wait and watch as each com- 
ponent image loads. 


Using a Sliced Image 


Image maps tend to be large, perhaps a few hundred pixels in each direction, and their 
files are large, too. Image maps must use the same optimization method for the whole 
image, even if large areas are solid color. When optimizing an image, whether through 
color reduction or compression, you must choose the appropriate optimization method, 
based on the highest color area of the image. Even if most of the image is blank, as long 
as a section of the image contains smooth gradients or photographic detail, the entire 
image must be optimized for these high-color areas. The image cannot be optimized 
fully; this results in a file that is larger than necessary. To solve this problem, break up the 
image map into several pieces, optimize each piece separately, and display them in a grid. 
This is similar to the tabbed interfaces discussed in the Creating Buttons chapter. 
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Slicing images allows you to compress each image slice separately. It also allows you to 
animate or swap specific regions in the splash screen, as you do with rollover effects, 
which are covered in the Creating Image Rollover Effects chapter. The disadvantage to 
using these presentations is that they can be very complicated to put together, even with 
the help of software such as ImageReady. 


Another disadvantage is that you cannot use circles or complex polygons as clickable 
areas because the tables that contain them are rectilinear. All clickable images in a sliced 
image must be rectangular. This is not a problem for most projects, but if you have many 
small linked areas near each other in a sliced image, and the clickable areas are adjacent, 
the user can accidentally click the wrong link. Figure 11-3 shows the difference between 
image map hot spots and clickable sliced images. 


Image maps can have circular clickable areas 


Sliced images can use only rectangular 
clickable areas 


Figure 11-3 Clickable areas in image maps and sliced images 


Still, because of the additional optimization control and the ability to animate and swap 
specific sections of the larger image, most sites use sliced images for their splash screens 
rather than image maps. Creating sliced images is covered fully in the Creating Sliced 
Images chapter. 


Using Flash 


You might want to use Flash to create animations for your splash screens instead of using 
image maps. Flash is actually perfect for splash screens because it can contain sophisti- 
cated animation and, as a vector file, the Flash movie loads quickly. Flash movies usually 
take more time to create than image maps or sliced images, so you would not use Flash 
to create small images such as simple buttons or logos. Because splash screens are larger 
and can showcase your work, the time it takes to create a Flash movie is worth the effort. 


Splash screens are the first image users see at a site, and provide an opportunity for the 
designer to impress the user. An application such as Flash helps you create animations 
that are more sophisticated than the simple GIF animations discussed in the Creating 
Animation for the Web chapter. The main advantage of using Flash is that your 
sophisticated animations also will have a relatively small file size. On the other hand, 
animating an image map or table full of sliced images using ImageReady will produce 
files that are prohibitively large. 
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To view a Flash animation, users must have installed the appropriate version of the 
Flash plug-in in their browser. You cannot guarantee that all users will have the appro- 
priate plug-in. According to Macromedia, the developer of Flash, over 90% of users 
have a Flash plug-in installed on their browser. However, many of these plug-ins are 
older versions, compatible with Flash versions 2 or 3. These older versions cannot dis- 
play movies created with the latest version of Flash, which at this writing is Flash 5. 
If you do use Flash, you need to create a backup image that will display if the user’s 
browser does not have the proper plug-in and the Flash movie does not play. So, even 
if you do not intend for most users to use your image map, you should create one as 
a backup. 


Using 3-D Technology 


In addition to a Flash animation, consider other graphics formats for splash screens. 
Formats such as Virtual Reality Markup Language (VRML), Java 3D, MPEG-4 and 
MPEG-7 (two multimedia formats from the Moving Picture Experts Group, the same 
organization that developed the MP3 audio format), and Extensible 3D with XML 
(X3D) are programming languages or complex markup languages. The tools to create 
images in these formats are almost as complex as the formats themselves. Also, other than 
the Java applets, all these formats require special viewing software that most users do not 
have. These formats all use vectors, as opposed to bitmaps, to encode information about 
images. The viewing software is used to rasterize the vector graphics into bitmap images 
that can be displayed on the screen. Choose these formats when you want to create a 
long-playing, high-color, complex animation or interactive environment. 


You may have heard of VRML or Web3D, but you probably have never actually seen graph- 
ics in these formats. These technologies help create sophisticated, 3-D Web pages that look 
more like a 3-D space than the usual, magazine-like 2-D page. Unfortunately, the graphics 
files required to view these pages are so large that even users with fast connections have to 
wait several minutes before the page and all necessary files load. 


You can use these technologies for tasks, such as demonstrating technical information, 
that you already perform with conventional Web graphics. For example, you could cre- 
ate a 3-D environment where the user flies through a model of a skeleton or car. Sites 
such as educational pages for a medical school course, or a demonstration at an auto- 
mobile manufacturer’s site might also need to display objects this way. 


You can sometimes create these sorts of demos with simpler formats such as QuickTime 
Virtual Reality (QTVR). QTVR files are panoramic bitmap images that have their ends 
connected, allowing you to scroll seamlessly across the image. See Apple’s Web site 
(www.apple.com) for more information on QTVR. 


Although these advanced formats have many limitations, you may want to investigate them 
for specialty projects. For example, if you need to show all sides of a product, and want the 
user to be able to rotate the product on the screen, you may want to use a QTVR file. 
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Using Metaphors 


In some ways, designing splash screens is like designing site logos, which are discussed 
in the Creating and Using Icons chapter. For both types of graphics you need to con- 
vey the attitude and style of the Web site. With logos, however, you are restricted to a 
small space, and cannot add many elements other than the site name, address, and a small 
graphical representation of the site. Splash screens give you much more room, the entire 
browser window if you want, and you can work with many more elements. 


Splash screens will not always have links; you can use graphics that decorate the page 
but do not link to other pages. Most splash screens will be navigation tools as well, how- 
ever, and need to represent not just the site as a whole, but also a collection of discrete 
pages or sections. 


To get started creating a splash screen that doubles as a map to the site, sketch a schematic 
diagram of the site, such as the one in Figure 11-4, that shows the relationship between 
different areas of the site. 


Archive 


review, 
i ey 


News Gons 


Figure 11-4 A simple schematic diagram of a Web site 


waloags 


After you sketch the site, find appropriate metaphors for the different areas. The most 
obvious use for an image map is when you actually need people to select a geographic 
region. Clicking an image that looks like a roadmap can be much more intuitive than 
selecting individual regions from a list of links or a selection menu. 


The site content itself should suggest a metaphor. If the site is related to food, for example, 
you can use an image of a dinner table setting, a kitchen, or a restaurant. In a restaurant 
image, users click the kitchen to find recipes and food preparation tips, while they click 
the dining room to find information about creating table designs. If the site has more 
technical content, you can use a metaphor such as a circuit board or a car engine. 


Although a metaphor related to the site content is effective because it reflects its subject 
and unifies the site, you can use a common metaphor that is not related to the subject mat- 
ter. For example, a simplified city map and a house plan are common site metaphors. 


Sometimes you want to evoke a feeling that transcends the actual content of your site. 
You might want to use an image of the solar system, for example, where the home page 
is represented by the sun and the other pages are represented by individual planets and 
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moons. You also might want to just use textures, colors, and fonts that are reminiscent 
of specific movies or other cultural artifacts, and are appropriate for the site. 


Once you have found an appropriate metaphor, sketch your diagram again, using sim- 
ple pictures instead of words. Include text to reinforce the meanings of the pictures, but 
make sure the pictures are meaningful on their own.Then simplify the diagram and pic- 
tures, removing the inessential elements to create an abstract representation. You might 
want to make your splash screen photorealistic, but normally you should abstract the idea 
to make navigation easier to understand. An abstracted version of the solar system 
metaphor is shown in Figure 11-5. 


Figure 11-5 An abstraction of a solar system metaphor 


Once you have a completed sketch, start creating the image in Photoshop or ImageReady. 


Making the Functionality Clear 


Not only do you have to make image maps functional by setting them to link to different 
pages, you also must make their purpose clear. You can add labels to the hot spots of 
image maps or to the individual slices of sliced images. While splash screens are an 
opportunity to be creative, the design should not overwhelm their purpose and usabil- 
ity. Also, splash screens are not always a substitute for text links. Make sure the users can 
navigate the site even if the splash screen cannot be displayed. 


Using ALT Attributes 


Whether you use image maps or sliced images in tables, you can add labels for the links 
that appear when the user rolls over them. These labels are created using the ALT 
attribute of the IMG tag for sliced images and the ALT attribute of the AREA tags used 
in image maps. Often the destinations of the links are not entirely clear. Use labels to 
describe the purpose of the links, reinforcing the information in the image itself. Also, 
users who cannot or choose not to display graphics in their browsers will not be able 
to navigate your site without the ALT text to help them know where the links lead. 
Figure 11-6 shows images with and without ALT text, as they appear in browsers, both 
those that can display images and those that cannot. 
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Images with no ALT text 


Images with ALT text 


Images being moused over 


Images not displayed 


Figure 11-6 Browsers displaying text from the ALT attribute 


Limiting Abstraction 


Metaphors and abstraction make links more interesting than using text alone. For example, 
if you want to link to a section on your site containing news, you might use the image 
metaphor of a newsboy holding a newspaper. You could then abstract that image into just a 
stylized hand holding a newspaper with the word “Extra!” on the front. However, if the image 
maps are too abstract or the metaphors are not obvious, the images are unclear. Figure 11-7 
shows a splash screen that uses too much abstraction. Although it is supposed to represent a 
map, that is not obvious. The metaphorical icons also are too abstract to have meaning. The 
graduation caps are meant to represent the locations of universities, but that also is unclear. 


Figure 11-7 A splash screen designed with too much abstraction 
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Although you can be creative when designing splash screens, the links should be obvi- 
ous. The users should not have to guess which areas are clickable. Game and novelty sites 
can encourage users to discover parts of the site on their own, and make them hunt for 
the part of the image that actually leads somewhere, but professional Web sites should 
have clear and easy navigation. 


When designing splash screens, make sure that every link is well-defined graphically. You 
might want to have others test the interface to make sure it is clear, such as the one in 
Figure 11-8.This image is based on the same idea as Figure 11-7, but is more obviously 
a map, and uses text because graphical metaphors inadequately represent different geo- 
graphic areas. 


Figure 11-8 A well-designed splash screen 


Controlling Navigation 


If a splash screen is well-designed, the links will take the user anywhere he or she needs 
to go within the site. However, you probably will not want to use an image map or a 
set of sliced images on every page, as it would take up too much space. You also will 
need to construct a navigation bar for the other pages in the site. The navigation bar 
must contain the same links as the splash screen, but in a condensed shape. Figure 11-9 
shows two navigation bars that reflect the colors used in the splash screen shown in 
Figure 11-8. 


When designing the navigation bar, you should repeat the colors, lines, and textures used 
in the splash screen. When they match, they appear to be part of a larger design, rather 
than separate designs forced together. A simple navigation bar can contain only single 
words or phrases, while a splash screen can contain graphical representations of the links. 
If the designs of the navigation bar and the splash screen match, the user will be 
reminded of the graphical representations when using the simple text links. This helps 
to make the functions of the text links clear as well. 
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Navigation bar using buttons 


an per East Side 
Upper West Side) Mave 
West Village ~~ Navigation bar using colored tables in HTML 


Figure 11-9 A splash screen and a navigation bar that share a similar design 


You should also include the navigation bar on the same page as the splash screen. Some 
users have the graphics display disabled in their browsers to speed the loading and ren- 
dering of pages. Some other users have text-only browsers. None of these users can nav- 
igate sites that have only graphical navigation. 


When you create a splash screen with links, you plan which parts of the image users will 
click to perform tasks, such as going to other parts of the site. To make splash screens easy 
to use and navigate, you must be able to easily specify the clickable regions. Photoshop 
and ImageReady include a feature called guides that helps make this possible. 


UsING 


GUIDES IN PHOTOSHOP AND IMAGEREADY 


Guides are thin vertical or horizontal lines that display over the image in the Image 
window. An example of an image with guides is shown in Figure 11-10.You use guides 
as an aid when laying out elements or slicing images to use later in tables. Like selection 
areas, guides are not saved or printed with the rest of the image when the image is saved 
in a Web format such as GIF or JPEG. However, they are saved in the PSD format, which 
is largely for saving temporary versions of files. Unlike selection areas, guides cannot be 
used as masks and do not constrain paint or filter effects to certain regions. 
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Figure 11-10 An image with guides showing 


Creating Guides 


The easiest way to create guides is to drag the pointer from the ruler in the Image win- 
dow toward the image. 


To create guides in Photoshop: 
1. Open blue_sky.tif from the Data Disk. 


2. If rulers are not visible, make them visible by selecting Show Rulers from 
the View menu. 


3. Using any tool, drag the pointer from the left ruler into the image to create a 
vertical guide. 


4. Drag the pointer down from the upper ruler to create a horizontal guide. 


To see exactly where you are placing the guide, show the Info palette and watch the X 
and Y values in the lower-left of the Info palette. By holding down the Shift key as you 
drag from the ruler, you can force the guide to snap to the ticks on the ruler. 


In Photoshop, you also can create guides by selecting New Guide from the View menu. 
In the New Guide dialog box, enter whether the guide will be horizontal or vertical, and 
enter the number of pixels away from the top or left side of the image to place the guide. 


In ImageReady, you can create entire sets of guides at once. This is convenient for cre- 
ating image maps and sliced images because you will probably want to use several guides. 


Create a set of guides in ImageReady: 
1. Create a 200 X 200-pixel image. 


2. Select Create Guides from the View Menu. The Create Guides dialog box 
opens, as shown in Figure 11-11. 


Using Guides in Photoshop and ImageReady 433 


3. Select Horizontal Guides to create guides running across the page. Select 
the top radio button and enter the number 3. This creates three guides that 
divide the image into four even rows. 


4. Select Vertical Guides to create guides running from top to bottom. Select 
the middle radio button and enter the number 18. This creates 11 evenly spaced 
guides. The guides count from the upper-left corner, so any remaining gaps will 
appear on the right or bottom edges if the spacing of the guides does not 
divide evenly into the dimensions of the image. This results in a leftover space 
on the right side of the image. 


— Horizontal Guides 
ch guides, evenly spaced Cancel | 


c k pixels between guides 


Cc T pixels from top (single guide) 


I Preview 


WM vertical Guides 


Ci guides, evenly spaced 


Cc k pixels between guides 


@ jio pixels from left (single guide) 


I Clear Existing Guides 


Figure 11-11 The Create Guides dialog box in ImageReady 


If you want to create only one guide, select the bottom option button and enter the 
number of pixels from the top or left side of the image that you want the guide posi- 
tioned. You also can select whether to clear the existing guides. 


Viewing Guides 


In ImageReady, guides always appear as light blue lines. In Photoshop, you can adjust the 
color and set the guides to display as solid or dotted lines. Change these aspects of your 
guides if they conflict with colors or textures in your original image. If the original image 
has areas of blue sky, for example, you might not be able to see blue guide lines over it. 


To adjust the color and style of guides in Photoshop: 


1. With blue_sky.tif open, create a vertical guide by dragging the pointer of any 
tool from the left ruler to the center of the image. Because the blue of the 
sky is similar to the blue color of the guide, the guide is difficult to see. 


2. Click Edit on the menu bar in Photoshop, point to Preferences, then click 
Guides & Grid to open the Preferences dialog box. 


3. Set the color to Light Red, the Style to Dashed Lines, and then click OK. 
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In both ImageReady and Photoshop, you can show or hide guides. When you hide 
guides, you remove them from view, allowing you to see the image unobstructed. 
Features such as guides and selection areas are called Extras and can be hidden all at once 
by deselecting the Show Extras item from the View menu. 


To hide guides from an image: 


1. With blue_sky.tif still open, and guides visible, click View on the menu bar, 
and then click Show Extras to deselect it. The guides should be invisible. 


2. Click View on the menu bar again. Point to Show, and then click Guides 
to select it. The guides should be visible again. 


The Show submenu includes other items such as Selection areas, Guides, and Slices. 
Next to each one is a space for a check mark. You can toggle the visibility of these items 
by selecting them from this submenu. You can also show or hide all items by selecting 
All or None. 


Working with Guides 


You can move, reorient, delete, or lock guides once they are created. 
To work with guides: 
1. With blue_sky.tif still open in Photoshop, create a horizontal and a vertical guide. 


2. Move the vertical guide. Select the Move tool, position the pointer over the 
guide, and then drag the guide to its new location. 


3. Reorient the horizontal guide. Hold down the Option key (for Windows, 
hold down the Alt key) and click the guide. This rotates the guide, turning it 
from vertical to horizontal or vice versa. 


4. Remove one of the guides from the image by using the Move tool to drag 
the guide off the image. 


5. Delete all guides by selecting Clear Guides from the View menu. 
6. Create a new guide. 


7. Lock the guide by selecting Lock Guides from the View menu. Once you 
are satisfied with the positions of your guides, you should lock them so you 
do not accidentally move them while editing other parts of the image. 


Using Snap 


The Snap feature allows you to precisely position selection areas, crops, slices and other 
extras without having to rely on your coordination with the mouse. When Snap is 
enabled, new selections and slices position themselves to your guides when you drag 
them within eight pixels of the guide.To enable Snap, click View on the menu bar, point 
to Snap To, and then click Guides. 
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You will use guides as you plan the layout of your splash screens. With Snap enabled for 
guides, setting image map regions and slices for sliced tables is easier. 


CREATING IMAGE MAPS WITH IMAGEREADY 


ImageReady provides several features you can use to create image maps. You can define 
the hot spots in an image map using the Image Map tools available in the toolbox. You 
also can define hot spots using layers. 


Using the Image Map Tools 


The Image Map tools are available in the toolbox, as shown in Figure 11-12. You also 
can open the Image Map tools in a separate palette by selecting the bottom row of the 
Tool menu. The first three Image Map tools create each of the three types of hot spots: 
rectangular, circular, or polygonal. Drag the tool over the area you want to define as 
clickable, or for polygonal areas, click once for each point that defines the area. The 
fourth tool is the Image Map Select tool. This lets you select and resize image map 
regions you have already defined. 


Tg 


Image Map Select tool 


Polygon Image Map tool 


Circle Image Map tool 


Rectangle Image Map tool 


Figure 11-12 The Image Map tools in the ImageReady toolbox 


You can constrain the Rectangle Image Map tool to create only perfect squares by hold- 
ing down the Shift key as you drag. The Circle Image Map tool can be used only to cre- 
ate perfectly circular image map areas. You cannot create elliptical image map areas. 


Create hot spots in ImageReady: 
1. Open us_map.tif from the Data Disk. 


2. Open the Image Map tools in a separate palette by clicking the Image Map 
tool area in the toolbox and selecting the bottom row. 


3. Select the Rectangle Image Map tool from the Image Map tool palette and 
drag it over Colorado on the map to create a rectangular image map area. 


4. Hold down the Shift key while dragging the pointer over North Dakota to 
create a square. 
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5. Select the Circle Image Map tool and drag it over Florida to create a circu- 
lar image map area. 


You can constrain the Rectangle Image Map tool and the Circle Image Map tool to a 
fixed size by selecting the Fixed Size check box in the Options bar. When this option is 
checked, you can enter the specific height and width you want for the rectangle, or the 
specific radius for the circle. 


To use the Polygon Image Map tool, click anywhere in the image to create the first point. 
Click again to create more points; the polygon follows the path defined by the straight 
lines between the points you set. Hold down the Shift key to constrain the line to 45 
degree increments. To finish the polygon, double-click the mouse at the last point. The 
line will then join the first and last point, closing the loop. You also can finish by hold- 
ing the pointer near the first point you defined and clicking the mouse. 


Create polygonal hot spots in ImageReady: 


1. With us_map.tif still open, select the Polygon Image Map tool and create a 
polygonal image map area around California by clicking repeatedly around 
the perimeter. When you are finished, to complete the area click the first 
point you made. 


To constrain all three shapes to any guides you have created, check the Snap option on 
the View menu. 


You use the Image Map Select tool to adjust existing image map areas. First select an 
area with the tool; selected areas change to a new color. You can drag entire areas, or 
manipulate the anchor tabs on the sides and corners of the selected area. You can resize 
circle areas, and resize and reshape rectangle and polygonal areas. 


Resize hot spots: 
1. With us_map.tif still open, select the Image Map Select tool. 


2. Select the image map area surrounding Colorado. The anchor tabs should 
become visible. 


3. Drag the corner and side tabs to make the area fit more precisely around the 
state outline. 
Setting Image Map Preferences 


By default, the image map areas you define cloud the image below the area, making it 
easier to see where the hot spot is positioned. This clouding only helps you edit the 
image and does not affect the image itself. 


To set image map preferences: 


1. Click Edit on the menu bar, point to Preferences, and then click Image 
Maps to open the Image Maps dialog box, shown in Figure 11-13. 
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2. Select Show Lines Only to disable the clouding feature. 


3. To adjust the clouding, enter 40% in the Image Map Overlay text box. (0% is 
completely transparent and 100% is completely opaque.) 


4. Set the color of the lines used to display the boundaries of image map areas 
to Brick Red. 


Preferences 


5 [Cyan 


| 


M 


Figure 11-13 The Image Maps Preferences dialog box in ImageReady 


You might want to hide the image map area outlines when editing the image. To do so, 
click the Image Map Visibility button in the toolbox, as shown in Figure 11-14. You also 
can hide the outlines by selecting Show Extras from the View menu, or by selecting 
Image Maps from the Show submenu under the View menu. 


The Image Map Visibility button 


Figure 11-14 The Image Map Visibility button 


Using the Image Map Palette 


You can view and set options for an image map’s areas by using the Image Map palette, 
shown in Figure 11-15. When a rectangular or circular area is selected, the Image Map 
palette displays the X and Y coordinates of the upper-left corner of the area relative to 
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the upper-left corner of the image. You can adjust these coordinates by clicking the 
arrows to the left of the numbers or by typing in new coordinates. In a similar way, you 
can edit the height and width of a rectangular area or the radius of a circular area. 


Adjust horizontal position 


Name of image map area 


Page to which that area links 


Frame of page to which that 
area links 


Alt: |oramercy Park Neighborhood Alternate text 
Adjust horizontal size 
Adjust vertical size 


Adjust vertical position 


Figure 11-15 The Image Map palette in ImageReady 


To adjust the dimensions of image map areas: 


1. With us_map.tif still open, use the Image Map Select tool to select one of the 
rectangular image map areas. 


2. Click Window on the menu bar, and then click Show Image Map to show 
the Image Map palette. 


. Click the up arrow next to the X value to translate the area to the right. 
. Click the down arrow next to the Y value to translate the area up. 
. Click the up arrow next to the W value to extend the right side of the area. 


. Select the circular area around Florida. 


ND wo A W 


. Click the down arrow next to the R value in the Image Map palette to 
decrease the radius of the area. 


On the right side of the Image Map palette are text fields where you can enter values 
for an area. Each area is given a name, which is not used unless you create a rollover 
effect. Rollover effects and animations in image maps are not efficient because the entire 
image must swap or be animated, not just the selected area. In the Image Map palette, 
you also can set the destination URL for an area and the alternate text that will appear 
as a label over the area when the user’s mouse is positioned there. 


To set attributes for the image map area: 
1. Select the image map area around California in us_map.tif. 


2. In the Name text box of the Image Map palette, type California. 
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3. In the URL text box, type cali-html. 


4. In the Alt text box, type California. Capital: Sacramento. This is the text 
that appears when a user rolls over the link. 


When an image map area is selected, you can use features in the Image Map tool options 
or the Image Map palette menu to send the area forward or backward, or to the top or 
bottom of the stack of areas. The only time you will need to use this feature is when 
you have overlapping areas and need to define which area will take precedence. Areas in 
the front take precedence. You also can delete or duplicate areas by selecting those 
options from the Image Map palette menu. 


You can select more than one area at a time by holding down the Shift key as you select 
areas with the Image Map Select tool. When multiple areas are selected, additional fea- 
tures become available in the Image Map tool options and the Image Map palette menu 
regarding alignment. If you wish, you can align the centers or edges of image map areas. 
When at least three areas are selected, you have more options for distributing the selected 
areas. You can evenly space the centers or edges of image map areas. You will seldom 
want to use the align or distribute features because normally you base the hot spots on 
the content of the image, instead of defining the hot spots in patterns. 


Creating Image Maps from Layers 


Depending on how you have constructed your splash screen, you might find it easier to 
define hot spots based on the layers in an image, rather than with the Image Map tools. 


To create an image map area from a layer, first choose a layer that has areas of trans- 
parency. If you want the area to be based on multiple layers, you must first merge the 
layers. Then select New Layer Based Image Map Area from the Layer menu. This creates 
a layer-based image map area. 


To create a layer-based image map area: 


1. With us_map.tif still open, use the Canvas Size dialog box to pad an extra 
100 pixels to the left side of the image. 


2. Open alaska.gif from the Data Disk. 


3. Click Select on the menu bar, and then click All to select the contents of 
the Alaska image. 


4. Copy the selection and paste it into us_map.tif. Use the Move tool to posi- 
tion the Alaska image in the lower-left corner. 


5. Make sure the new layer containing the Alaska image is selected in the Layers 
palette. Click Layer on the menu bar, and then click New Layer Based 
Image Map Area. Five new rectangular image map areas are created around 
the main part of the image and the clusters of islands. 


440 Chapter 11 Creating Splash Screens 


10. 


11. 


12. 
13. 


14. 


ta 


16. 


. In the Image Map palette, change the Shape to Circle. The image map areas 


turn into circles. 


. Change the shape to Polygon. The areas turn into polygonal areas. 
. Zoom in to the areas to see the multiple points. 


. Set the Quality option to 0.This sets how many points are used to define the 


polygon that encloses the layer. Note how the outline is very crude and does 
not follow the outline of the layer very well. 


Set the Quality to 100. Note how the area selection more closely follows the 
outline of the layer. You also can see the difference in Quality settings in 
Figure 11-16. 


Preview the image in a browser. Note all the coordinates required to define 
the polygonal coordinates of this area. Over 2,400 bytes are added to the 
HTML file. 


In ImageReady, set the Quality to 60. 


If you edit the layer, the image map area changes accordingly to follow the 
new outline of the layer contents. Move the layer up with the Move tool. The 
image map area follows. 


You cannot edit the individual coordinates of the area as long as it is layer- 
based. Click the palette menu in the Image Map palette, and then click 
Promote Layer Based Image Map Area. This converts the layer-based 
area to a tool-based area. Once a layer-based area is converted to a tool-based 
area it cannot be converted back. 


Use the Image Map Select tool to edit the tabs on the polygonal image map 
area. Make the outline fit the shape of the state. 


When a layer contains content separated by transparency, multiple image map 
areas are created. Sometimes, many small, insignificant areas are generated by 
this process, and are too little to be clicked by users. Select the small areas 
surrounding the islands and delete them. 


For most layers you will want to use a polygon shape because it follows the outline of 
the layer more closely than do the other two shapes. The default setting for the Quality 
option is 80. This is a percentage of accuracy, not the number of points created for the 
polygon. You should use as low a value as you can to conserve the file size of the result- 
ing HTML. 


Sometimes you will want to define hot spots based on selection areas. Using the Magic 
Wand tool gives you more control over defining specific areas based on pixel color. To 
create image map regions from selection areas, copy the selection and paste it as a new 
layer. Then create the layer-based image map area as described in the preceding steps. 
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| W Untitled-2 @ 100% (Original) 


Layer converted to polygon image map area with 
quality of 100% 


Layer converted to polygon image map area with 
quality of 80% 


Figure 11-16 Layers converted to image map areas using different quality settings 


Saving Image Maps 


You save image maps as you would any other image in ImageReady. Optimize the image 
using the Optimize palette and select Save Optimized As from the File menu. This saves 
the image map image file as well as the HTML file that displays it. To incorporate the 
image map into a Web page, copy the necessary HTML from this file. 


To save the image map: 
1. Choose an appropriate setting in the Optimize palette. 


2. Click File on the menu bar and then click Save Optimized As. Click the 
Save as type list arrow and then click HTML and Images. Save the image 
as us_map.gif in a new folder named chapter11. This automatically also 
saves an HTML file named us_map.html in the same folder. 


3. Open us_map.html in a text editor to see the code. If you want to use the 
image map in a Web page, copy all the text between the comment tags and 
paste it into your page. 


You have some control over the HTML that is produced. Click File on the menu bar, 
point to Output Settings, and select HTML. At the bottom of the Output Settings dia- 
log box, shown in Figure 11-17, are two options for the HTML produced for image 
maps. Next to Type, make sure that Client-Side is selected. The other options are for 
creating server-side image map code and require a special script on the Web server. Next 
to Placement, select Top, Body, or Bottom to determine where the MAP tag will be 
placed in the created HTML file. 
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Output Settings 
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| Client-Side zi 


Figure 11-17 The Output Settings dialog box 


CREATING IMAGE Maps MANUALLY 


Although you can easily create image maps with WYSIWYG HTML editors and tools 
such as ImageReady, often it is just as easy to code the HTML manually. Also, you may 
find yourself in a situation where you do not have access to software that can be used 
to create image maps, or where the software does not fully support all features of image 
maps. For example, some WYSIWYG HTML editors do not define polygonal hot spots. 
If you use one of these editors and you require clickable areas other than rectangular or 
circular, you must either find other software or code the HTML yourself. 


In the early days of the Web, image maps were coded with server-side scripts. When the 
user clicked the image, a script on the Web server processed the coordinates of the place 
on the image the user clicked, the script looked up the appropriate destination in a list, 
and delivered that page to the user’s browser. The drawback to this method is that server- 
side scripting requires additional work for both graphic designers and systems adminis- 
trators. It is far easier to use the client-side image maps used today. Most browsers 
released after 1996 support client-side image maps. 


The first step in creating a client-side image map is to define the image as an image map. 


Defining an Image as an Image Map 


You can use any image as an image map without editing the image file. The map itself 
is defined in the MAP HTML tag. This tag requires one attribute, NAME. It also requires 
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a closing tag. Between the opening and closing tags are additional AREA tags. Each 
AREA tag defines one hot spot. An example MAP tag follows. It has the name 
Manhattan and contains one rectangular hot spot that links to a file named soho.html. 


<map name="Manhattan"> 

<area href="soho.html" alt="SoHo" shape="rect" 
coords="95,255,130,275"> 

</map> 


To define an image as an image map, add the USEMAP attribute in the IMG tag. The value 
of the USEMAP attribute must be set to the name of the relevant MAP tag. The MAP 
tag does not have to be on the same page. You could have several image maps on dif- 
ferent pages all referring to a single MAP tag. It is unlikely, but possible, that you will 
use more than one image map on a page. To guarantee that there is no confusion about 
which image uses which MAP tag, the names must be kept consistent. Here is the exam- 
ple again with an IMG tag accessing the map: 


<map name="Manhattan"> 

<area href="soho.html" alt="SoHo" shape="rect" 
coords="95,255,130,275"> 

</map> 

<img src="manhattan.jpg" usemap="#Manhattan"> 


The USEMAP attribute must be set to the name of the map with a pound sign to the 
left of it. Notice that the IMG tag does not use an ALT attribute. This is unnecessary 
because the alternate text is defined in the ALT attribute of the AREA tag. The image 
tag also does not need to be wrapped in an anchor tag, because the AREA tag also con- 
tains the necessary HREF attribute to define the destination of the link. 


Defining Hot Spots in an Image Map 


The AREA tag requires two additional attributes, SHAPE and COORDS. The 
SHAPE attribute determines the shape of the hot spot and can be set to one of three 
possible values: 


=m RECT defines the hot spot as a rectangle. 


a CIRCLE defines the hot spot as a circle. The circle must be symmetrical and 
cannot be an ellipse. 


mu POLY defines the hot spot as a polygon with any number of straight sides. 
The polygon does not have to be symmetrical and can wrap around regions 
in an image or even double back on itself. 
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The COORDS attribute determines the dimensions and position of the hot spot and 
requires numerical values, separated by commas. The values are X and Y coordinates of 
pixels in the image. Counting always starts at 0,0 in the upper-left corner of the image, 
and the numbers increase in value moving down and across. The COORDS attribute 
must be set for rectangular, circular, and polygonal hot spots as follows: 


a For rectangular hot spots, the COORDS attribute requires four values. The 
first two numbers are the X and Y coordinates of the upper-left corner of 
the hot spot. The last two numbers are the X and Y coordinates of the lower- 
right corner of the hot spot. This is different from creating image maps with 
ImageReady, where you specify the height and width of the area, rather than 
the coordinates of the lower-right corner. 


a For circular hot spots, the COORDS attribute requires three values. The first 
two numbers are the X and Y coordinates of the center of the hot spot. The 
last number is the radius, in pixels, of the hot spot. 


a For polygonal hot spots, the COORDS attribute can take any number of 
pairs of values. Each pair represents the X and Y coordinates of a corner 
of the hot spot. The final shape is defined by the lines that connect each suc- 
cessive pair of coordinates. The point defined by the last pair of values con- 
nects back to the first pair. Because it is easy to get confused when typing or 
editing long strings of numbers, remember that there should always be an 
even number of values of the COORDS attribute for polygonal hot spots. 


The following is an example using all three shapes of hot spots, as shown in Figure 11-18: 


<map name="Manhattan"> 

<area href="gramercy.html" alt="Gramercy Park" 

shape="rect" coords="93,165, 174,195"> 

<area href="financial.html" alt="Financial District" 

shape="circle" coords="110,306,35"> 

<area href="theater.html" alt="Theater District" shape="pol 

y" coords="7,106, 64,106, 64,123, 85,123, 85,165, 
13,169, 7,152"> 

</map> 


<img src="manhattan.jpg" usemap="#Manhattan"> 
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Polygon: 

pt1: x=7, y=106 
pt2: x=64, y=106 
pt3: x=64, y=123 
pt4: x=85, y=123 
pt5: x=85, y=165 
pt6: x=13, y=169 
pt7: x=7, y=152 


Rectangle: 
upper-left corner: 
x=93, y=165 
lower-right corner: 
x=174, y=195 


Circle: 
center: x=110, y=306 
radius: 35 


Figure 11-18 An image map with hot spots of different shapes 


The hot spots are not outlined or indicated in any way on the image, other than that 
the ALT text appears when the pointer is over the hot spot. In the figure, the outlines 
are added for explanation. The spacing of the values for the COORDS attribute does 
not matter. You might want to add extra space to make the coordinates more readable. 


Finding the Coordinates for Hot Spots 


The only tricky part of creating image maps manually is finding the exact coordinates 
to use for the hot spots. Most image software has a feature that lets you know the exact 
position of any pixel in the image. In Photoshop and ImageReady, you use the Info 
palette. So, while you can create image maps manually, you still need to rely on graph- 
ics software to help find the coordinates. The Info palette always displays the position of 
the pointer relative to the rest of the image. 


To find the values for a rectangular hot spot, position the pointer in the 
upper-left corner of the region you want to be linked. Look at the X and Y values in 
the Info palette and add them to your HTML code. Then do the same for the lower- 
right corner. You might find it easier to select the area with the Rectangular Marquee 
tool first. 


To find the values for a circular hot spot, select the Elliptical Marquee tool and position 
the pointer over the center of where you want the hot spot. Note the coordinates in the 
Info palette and add them to your HTML. Hold down the Shift and Option keys and 
drag the pointer over the image to create a perfect circle selection centered around your 
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original coordinates. Note the Width and Height values in the Info palette. These are 
equal to the diameter of the circle. Because you want the radius, record half of the width. 


If you're working in Windows and want to create a perfect circular selection, 
gt hold down the Alt key and then drag the pointer over the image. 


To find the values for a polygonal hot spot, select the Polygonal Lasso tool and select 
the area you want as a hot spot. Then position the pointer over each corner and note 
the coordinates in the Info palette. Record the coordinates of each corner, in order, 
around the image. If you record the coordinates out of order, you might get hot spots 
that double back on themselves, as shown in Figure 11-19. These hot spots work, but 
might not produce the results you intend. 


Figure 11-19 A polygonal hot spot that crosses over itself 


If you define multiple hot spots that overlap each other, the browser gives precedence 
to the first area defined. You can use overlapping to create oddly shaped hot spots such 
as crescents. 


CHAPTER SUMMARY 


o Splash screens should establish the identity of the site, make the available content 
clear, and evoke a feeling about the site. 


a Image maps are relatively easy to make, but tend to be large and have less flexibility 
than sliced images. 


o Using Flash or other advanced technology requires more effort than creating image 
maps and the resultant images will not be supported by all users’ browsers. 


o Guides make it easy to plan where to place hot spots or make cuts for sliced images. 
a Snap the edges of the image map areas to guides to keep them aligned. 
o Hot spots in image maps can have three shapes: rectangular, circular, or polygonal. 


o You can create hot spots for image maps in ImageReady with the Image Map 
tools, or by basing them on different layers in the Layers palette. 
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9 A polygonal hot spot can be created to follow a complex outline exactly, but 
including every point may result in burdensome HTML. Use as few points as possi- 
ble to minimize file size. 


a You need to write the coordinates of the hot spots in the HTML file that displays 
the image map. These coordinates are available from the Info palette. 


a ImageReady saves both the image and the HTML file necessary to display the 
image map. You can copy, paste, and edit the HTML in your own Web pages. 


REVIEW QUESTIONS 

1. Which of the following is true about image maps? 
a. They can have animations in specific regions. 
b. They can have circular hot spots. 
c. They contain complicated tables. 
d. They contain one image file for each area. 

2. Which of the following is true about sliced images? 
a. They can have animations in specific regions. 


b. They can have polygonal hot spots. 


c. They do not contain complicated tables. 
d. They contain one image file. 

3. What kind of site is not appropriate for splash screens? 
a. E-commerce site that requires user accounts 
b. Online magazine 
c. Online portfolio 
d. Promotional site 

4. Which of the following is true about Flash and 3-D technologies? 
a. They have universal browser support. 
b. They are not good for specialty visualizing projects. 
c. They do not use vectors. 


d. They require a long development time. 
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10. 


. Which of the following statements is false? 


a. Client-side image maps are obsolete. 
b. Server-side image maps are obsolete. 
c. Server-side image maps require a script on the server. 


d. Server-side image maps use the USEMAP attribute in the IMG tag. 


. Which of the following is a reason to use an image map? 


a. You want to animate certain areas in a graphic. 
b. You want to optimize certain areas in a graphic differently from other areas. 
c. You want to use HTML instead of graphical elements. 


d. You want to use polygonal hot spots. 


. Which of the following image formats can be used as image maps? 


a. GIF only 

b. GIF or JPEG only 
c. GIF JPEG, or PNG 
d. JPEG only 


. Which of the following is not a way to use the Create Guides dialog box in 


ImageReady to create a horizontal guide that runs through the middle of an 
image that is 100 pixels high? 


a. Make one guide, evenly spaced 
b. Make 49 pixels between guides 
c. Make 50 pixels between guides 
d. Make a single guide that is 50 pixels from the top 


. Which of the following statements about guides in Photoshop or ImageReady 


is false? 

a. Guides are saved with PSD images. 

b. Guides can be saved with GIF and JPEG images. 

c. Guides do not affect edits made to an image. 

d. Guides do not print. 

Which of the following is not a way to hide guides from view? 
a. Deselect Guides from the Show submenu. 

b. Deselect Show Extras. 

c. Double-click the guides. 


d. Select None from the Show submenu. 


11. 


12. 


13. 


14. 


15. 
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What happens when you hold down the Option key (Alt key in Windows) and 
click the guide? 


a. The guide is deleted. 
b. The guide is hidden. 
c. The guide is selected. 
d. The guide reorients from vertical to horizontal or vice-versa. 


If you see that the Image Map palette includes options for Shape and Quality, 
what do you know about the currently selected image map area? 


a. It is a tool-based area. 

b. It is a layer-based area. 

c. It is a polygon. 

d. It is not a circle. 

How would you create an elliptical hot spot in ImageReady? 
a. Overlap two circular hot spots. 

b. With the Circle Image Map tool 

c. With the Ellipse Image Map tool 

d. It cannot be done. 


Which of the following options are available when two image map areas are 
selected in ImageReady? 


a. Alignment 

b. Changing the stacking order 

c. Conversion to layer-based hot spots 
d. Distribution 


How do you numerically change the size of a circular image map area in the 
Image Map palette in ImageReady? 


a. Edit the H value. 
b. Edit the R value. 
c. Edit the W value. 
d. Edit the X value. 
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16. Why would you not use a Quality setting of 100 when converting a layer-based 


17. 


18. 


19. 


20. 


image map area to a polygonal tool-based one? 

a. A polygon set to 100% is the same as a circle. 

b. It generates too many coordinate points. 

c. The polygon will not follow the true outline of the layer. 

d. A setting of 100 should be used; it gives the best results. 

Why do you need to include a NAME attribute in the MAP tag? 
a. A NAME attribute is unnecessary. 

b. So the AREA tag knows to which map it applies 

c. So the IMG tag knows which map to use 

d. So the MAP tag knows to what image it applies 


Which of the following is not a valid value for the SHAPE attribute of the 
AREA tag? 


a. “circle” 
b. “poly” 
Ce “rect” 
d. “square” 


Which of the following statements is true? 
a. Circular hot spots always take four coordinates. 
. Rectangular hot spots always take four coordinates. 


c. Polygonal hot spots can take any number of coordinates as long as the number 


is odd. 


d. Polygonal hot spots are defined by listing X/Y pairs with the radius to the 
next point. 


Which of the following is a valid AREA tag? 


a. <a href="net.html"><area shape="circle" coords="98,87, 
76" src="map.jpg"></a> 


b. <area coords="13,24,35,46" shape="rect" href="next.html"> 
<img src="map.jpg"></area> 


c. <area shape="circle" href="next.html" coords="12,23,34"> 


d. <area shape="poly" href="next.html" coords="12 23, 
34 45, 56 67, 78 89"> 
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HANDS-ON PROJECTS 


Project 1: Exploring Splash Screens on the Web 


WI Many sites use splash screens, but others do not. In your Web browser, visit at least 20 Web 


sites and answer the following questions: 


1. As a percentage, how many Web sites use splash screens of one kind or another? 


2. What sorts of sites are these? Are they online magazines, service sites, retail sites, 
or promotional sites? 


3. How many of these splash screens are created using Flash? How many use image 
maps? How many use images in tables? 


4. How would you characterize these splash screens? Do they contain mostly text, 
some text, or no text at all? 


Project 2: Designing a Splash Screen 


ee You are part of a team of people developing the front end for a new Web site that sells 
children’s toys. Design a splash screen to use on the home page of this site. 


Complete the following steps: 


1. In Photoshop, create a new image that is 320 pixels wide and 240 pixels high. 
There is no standard size for splash screens, but this is a common size. 


2. The site contains six sections: Electronic Toys, Board Games, Dolls and Stuffed 
Animals, Educational Toys, Computer Games, and Infant and Toddler. Rather than 
list links to the different sections, create a single image that incorporates the six 
section names as well as icons for each section. For example, include an image of 
a teddy bear near the link to Stuffed Animals. 


3. Use a large, simple sans serif font such as Clownface or Comic sans for the text 
containing the different section names. 


4. Because the theme of the site is related to children, use bright colors for the text 
and background colors. Use pure black (#000000) and white (#ffffff), the paint 
primaries red (#ff0000), yellow (#ffff00), and blue (#0000ff), and the paint secon- 
daries orange (#ff9900), green (HOOff00), and purple (#9900ff). 


5. The background color of the home page is white. The edges of the image should 
also be white so that the screen blends with the background color. 


6. Render the design in Photoshop, using layers to separate all the elements from 
each other. 


7. Save the file as toy_screen.psd in a new folder named project_11-2. 
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Project 3: Designing Another Splash Screen 


po Š š š r r 
=) You need to create another splash screen, this time for an alternative music site. 


The section names do not lend themselves to obvious iconography the way those of the 
toy site do. The metaphor for this image should evoke a feeling, rather than actually show 
pictures of the content. 
Complete the following steps: 

1. In Photoshop, create a new image that is 320 pixels wide and 240 pixels high. 


2. The color scheme for this site is very dark. The background color of the home 
page is black. Make the image black. 


3. Create a rough pattern to use as the background, using the Add Noise filter and 
at least one other filter to add texture. 


4. Blur the image with a radius of 0.3 pixels. 
5. Colorize the image to a Hue of 150. 


6. Use an ornate, highly serifed font such as Gothic or Frankenstein to label the sec- 
tions of the site: News, Reviews, Downloads, Interviews, Calendar. Use subtle 
monochromatic text to reinforce each section. Use dark shades of alternative col- 
ors such as dark ochre (#666633), maroon (#660033), and dark teal (#00366). 


7. Add an Outer Glow effect to each text layer to make it easier to read. Keep each 
piece of text for each link in its own layer. 


8. Save the image with layers intact as music_screen.psd in a new folder named 
project_11-3. 


Project 4: Creating an Image Map in ImageReady 


You have a map of Manhattan that is to be used as a navigation tool for linking to pages 
about businesses in different New York City neighborhoods. Use ImageReady to create 
an image map so that any click on the land area takes the user to a destination. 


PAatds-on 


Project 


Complete the following steps: 
1. In ImageReady, open file imap.gif from the Data Disk. 
2. Use the Rectangular Image Map tool to select the green area in the image. 


3. Select the Image Map Select tool to adjust the area. Alternately, adjust the X,Y, 
W, and H values in the Image Map palette. 


4. With the area selected, type park.html in the URL field in the Image Map 
palette and type Central Park in the Alt field. 


5. Everywhere you see text in the image, create a polygonal hot spot around it. 
Adjust the points with the Image Map Select tool so that nearly every pixel of the 
image (other than the blue water) is covered by one of the hot spots. 


6. For each area, add the text from the image to the URL and Alt fields in the 
Image Map palette, for example, MurrayHill.html and Murray Hill. 
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7. Preview the image map in your browser. Each area in the image should be a link 
to a different URL. 


8. Save the HTML and image as map.html in a new folder named project_11-4. 


Project 5: Creating an Image Map from Layers in ImageReady 


p 3 r è è 
ey) Create an image map from one of your designs from an earlier exercise. 


Complete the following steps: 
1. In ImageReady open the file music_screen.psd you created for Project 3. 
2. Select the layer that contains text for the News link. 


3. Click Layer on the menu bar, point to Layer Style, and then click Create 
Layers. This creates a new layer from the effect. Merge this new layer with the 
news text layer. 

4. Select New Layer Based Image Map Area from the Layer menu. You should 
see a new image map area selection around the contents of the layer. 

5. Select Polygon for the Shape. 


6. Set the Quality to as low a number as possible so that the basic outline is pre- 
served without using too many points. 

7. Select Promote Layer Based Image Map Area from the Image Map 
palette menu. 


8. Edit the polygon points with the Image Map Select tool to more closely fit the 
outline of the text. 


9. Enter appropriate entries for the URL and Alt fields in the Image Map palette. 
10. Repeat steps 2 through 9 for each link in the image. 
11. When you are finished, preview the image map in a browser. 


12. Select Save Optimized from the File menu and save as music_screen.html in a 
new folder named project_11-5. 


Project 6: Creating an Image Map Manually 


Take one of the images from a previous exercise and code the necessary HTML to make 
it an image map. 


Complete the following steps: 

1. In Photoshop, open the image toy_screen.psd that you created for Project 2, 
flatten the layers, optimize and save as toy_screen.jpg in a new folder named 
project_11-6. 

2. Use the Rectangular Marquee tool to select a rectangular area around one of 
the section names and icons. 
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3. Show the Info palette. Position the pointer over the upper-left corner of the 
selection area and note the X and Y values in the Info palette. 


4. Position the pointer over the lower-right corner of the selection area and again 
note the X and Y coordinates. Write down the name of the link and the two pairs 
of coordinates on paper or in a text document. 


5. Open a new text document and save it as screen.html in the project_11-6 folder. 
6. Add the following HTML: 


<img src="toy screen.jpg" width="320" height="240" 

usemap="#screen" border="0"> 

<map name="screen"> 

<area href="###.html" alt="###" shape="rect" coords="###"> 

</map> 

7. Replace the three ### characters with the appropriate link, alternate text, and 

coordinates. (You can make up the link, as there is not really anything to link to.) 
The coordinates should appear as four numbers separated by commas, first the 
upper-left X coordinate, then upper-left Y, then lower-right X, and lower-right Y. 
For example: coords="12,23,34,45". 


8. Duplicate the AREA tag and fill in the necessary links, alternate text, and coordi- 
nates for each hot spot. 


9. Save the screen.html file and open it in a browser. Point to the different hot spots. 
You should see the alternate text appear over the proper hot spots and the link 
display in the status bar. 


Project 7: Creating Overlapping Circular Image Map Hot 
Spots Manually 

You have an image that needs to be used for navigation. Because of its shape it cannot 
be created as distinct buttons or as image slices in a table. 

Complete the following steps: 


1. In Photoshop, open file arrows.tif from the Data Disk. Save it as arrows.jpg in a 
new folder named project_11-7. 


2. You need to create five circular hot spots so that the area for the green disc over- 
laps the blue areas. The hot spots for the blue areas will end up being crescents 
rather than circles. 


3. Use the Elliptical Marquee tool to select the green disc. Note the coordinates of 
the center of the disc and note the width of the selection in the Info palette. (The 
coordinates do not have to be exact; estimate as well as you can.) (Hint: The center 
of the disc is in the exact center of the image). Write down the coordinates of the 
center and the radius of the selection. 


4. Repeat Step 3 for each of the blue discs. 


5. Open a new text file and save it as screen2.html in the project_11-7 folder. 
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6. Add the following HTML: 


<img src="arrows.jpg" width="160" height="160" 
usemap="#screen2" border="0"> 

<map name="Sscreen2"> 

<area href="home.html" alt="Home" shape="circle" 
coords="###"> 

<area href="nw.html" alt="NorthWest" shape="circle" 
coords="47,47,41"> 

<area href="ne.html" alt="NorthEast" shape="circle" 
coords="###"> 

<area href="sw.html" alt="SouthWest" shape="circle" 
coords="###"> 

<area href="se.html" alt="SouthEast" shape="circle" 
coords="###"> 

</map> 


7. Replace all the ### characters with the appropriate coordinates and radii for each 
area. The numbers will be the X coordinate of the center of the circle, then the 
Y coordinate of the center of the circle, then the radius of the circle, separated by 
commas. To get you started, the first blue disc already has its coordinates in place. 


8. Save the text file and open it in a browser. Although the five hot spots overlap 
each other, because the area for the green disc was defined first it takes prece- 
dence over the others. 


Project 8: Creating Polygonal Hot Spots Manually 


= . 
Hands-on You have an arrow-shaped button that will be used near other small buttons. You want 


to make sure that only clicks on the arrow-shaped button take the user to the destina- 
tion and stray clicks are ignored. 


Complete the following steps: 
1. In Photoshop, open file right.jpg from the Data Disk. 


2. Position the pointer over each of the seven distinct corners of the green arrow, 
noting the coordinates in the Info palette. 


3. Open a new text file and save it as arrow.html in a new folder named 
project_11-8. Also save right.jpg to this folder. 


4. Add the following HTML: 


<img src="right.jpg" width="160" height="120" 
usemap="#arrow" border="0"> 

<map name="arrow"> 

<area href="next.html" alt="Next Page" shape="poly" 
coords="###"> 

</map> 
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5. Replace the ### with each pair of coordinates, separated by commas. Make sure 
to list the pairs in order, clockwise or counterclockwise around the arrow. Save 
the image to the project folder, using the same name. 


6. Save the file with the same name and in the same location, and open it in a 
browser. You should see the alternate text appear only when the mouse is over the 
arrow and nothing else. 


Case Project 


For the home page of your portfolio, create an image map to use as a splash screen. The 
map should contain links to all the main sections of the portfolio, and should use the same 
color scheme used in the navigation buttons and other images on the home page. Any text 
on the home page should be placed in a colored box with a different colored border that 
displays in both Netscape and IE. Try making the colored border one pixel thick. 


